import { CheckBoxGroup, DatePicker, Modal } from '@kedacom/react-next'
import React, { useEffect, useState } from 'react'
import { useBasicInfoStore } from '../store'
import styled from 'styled-components'
import shallow from 'zustand/shallow'
import { useCreateContentStore } from '../../../store'
import dayjs, { WEEKDAY } from '@/plugins/dayjs'
import Alert from '@/components/Alert'
import { t } from 'i18next'
import { clearCheckedMeetingRooms } from '../store.room'
import { useGlobalStore } from '@/store/global'

const StyledWrap = styled.div`
	padding: 40px 40px 10px;
	.line {
		margin-bottom: 30px;
	}
`

export const dayOptions = [
	{ label: t('周一'), value: '1', width: 60 },
	{ label: t('周二'), value: '2', width: 60 },
	{ label: t('周三'), value: '3', width: 60 },
	{ label: t('周四'), value: '4', width: 60 },
	{ label: t('周五'), value: '5', width: 60 },
	{ label: t('周六'), value: '6', width: 60 },
	{ label: t('周日'), value: '0', width: 60 },
]

export default function RepeatCheckModal() {
	const SWITCH = useGlobalStore((state) => state.SWITCH)
	const { _isRepeatDialogShow, meetingFormular, update, checkMeetingName } = useBasicInfoStore(
		(state) => ({
			_isRepeatDialogShow: state._isRepeatDialogShow,
			meetingFormular: state.meetingFormular,
			update: state.update,
			checkMeetingName: state.checkMeetingName,
		}),
		shallow
	)
	const { maxDayForAllowBookMeeting, systemDate } = useCreateContentStore(
		(state) => ({
			maxDayForAllowBookMeeting: state.maxDayForAllowBookMeeting,
			systemDate: state.systemDate,
		}),
		shallow
	)
	const [selectedDays, setSelectedDays] = useState<string[]>([])
	const [date, setDate] = useState(dayjs().format('YYYY-MM-DD'))

	useEffect(() => {
		if (_isRepeatDialogShow) {
			let _m = meetingFormular ?? {
				endTime: dayjs().add(7, 'day').format('YYYY-MM-DD'),
				weekDays: dayjs().day().toString(),
			}
			setDate(_m.endTime)
			setSelectedDays(_m.weekDays.split(','))
		}
	}, [_isRepeatDialogShow])

	const handleOk = () => {
		if (selectedDays.length === 0) {
			Alert(t('没有选择重复日期，请检查'))
			return
		}
		clearCheckedMeetingRooms(
			() => {
				update({ _isRepeatDialogShow: false, repeat: true })
				update({ repeat: true, meetingFormular: { endTime: date, weekDays: selectedDays.join(',') } })
				checkMeetingName()
			},
			() => {},
			t('更改重复选项会释放您锁定和预定的所有会议室，是否继续?')
		)
	}

	return (
		<Modal
			title={t('重复')}
			height={315}
			width={670}
			open={_isRepeatDialogShow}
			onOk={handleOk}
			className="repeat-check-modal"
			onCancel={() => {
				update({ _isRepeatDialogShow: false })
			}}
			okText={t('确定')}
			cancelText={t('取消')}
		>
			<StyledWrap>
				<div className="line">
					<CheckBoxGroup
						options={dayOptions}
						value={selectedDays}
						onChange={(e, v, o, l) => {
							setSelectedDays(v)
						}}
					></CheckBoxGroup>
				</div>

				<div className="line">
					<span>{t('结束时间')}</span>
					<DatePicker
						style={{ margin: '0 30px 0 5px' }}
						inputWidth={115}
						minDate={systemDate}
						maxDate={maxDayForAllowBookMeeting}
						value={date}
						panelPreventOverflow={false}
						onChange={(e, v) => {
							setDate(v)
						}}
						i18n={{
							confirm: t('确认'),
							year: t('年'),
							month: [
								t('1月'),
								t('2月'),
								t('3月'),
								t('4月'),
								t('5月'),
								t('6月'),
								t('7月'),
								t('8月'),
								t('9月'),
								t('10月'),
								t('11月'),
								t('12月'),
							],
							week: [t('日'), t('一'), t('二'), t('三'), t('四'), t('五'), t('六')],
						}}
					/>
					{!!SWITCH.create.repeatTillTime && (
						<span>{t('最晚可预定到{{date}}', { date: maxDayForAllowBookMeeting })}</span>
					)}
				</div>
				<div className="line">
					<span>
						{t('摘要： 每周的{{name}}进行，直到{{date}}', {
							name: selectedDays.map((val) => WEEKDAY[Number(val)]).join('、'),
							date: date,
						})}
					</span>
				</div>
			</StyledWrap>
		</Modal>
	)
}
